<template>
  <div class=" width100 tw-h-90 flex-between-center ">
    <span style="font-size: 24px;font-weight: 700;color: #171920;line-height: 90px">{{ '课程中心' }}</span>
    <div class="flex-start" style="font-weight: 400;font-size: 16px;color: #171920">
      <div v-for="(item, index) in data.courseTypeList" style="position: relative" :key="index"
           @mouseenter="courseTypeTabChange(item,index)">
        <a :class="{ activeCourse: data.selectedCourseTypeIndex == index, black: data.selectedCourseTypeIndex != 0 }"
           class="headerTab"
           :style="index == 0 ? 'margin-left: 0' : ''">
          <span class="" @click="goCourseCenter()">{{ item.name }}</span>

        </a>
        <p class="course-bottom" v-show="data.selectedCourseTypeIndex==index"></p>
      </div>
    </div>
  </div>
  <div style="width: 100%;">
    <div class="flex-between normal-text" >
      <CourseCardGroup :bannerList="data.courseCenterBannerList" :goodsList="data.goodsList"
                       @goGoodsInfo="goGoodsInfo"></CourseCardGroup>
      <div class="flex-column tw-justify-between" style="width: 280px;height: 673px;">
        <div style="background-color: white;color: #171920;padding: 20px;flex: 1">
          <div
              style="width: 240px;padding-bottom: 20px;border-bottom: 1px solid #EBEBEB;display: grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows: 1fr 1fr">
            <div v-for="unit in data.examTrendList.slice(0,6)" class="theme-hover"
                 style="font-size: 14px;padding: 2px 0" @click="goNewsInfo(unit.articleId)">{{ unit.name }}
            </div>
          </div>
          <div class="flex-start-center" style="padding-top: 22px;font-size: 16px;margin-bottom: 15px">
            <div v-for="(item, index) in data.newsTabList" :key="index" @mouseenter="newsTabChange(item,index)">
              <a :class="{ active: data.selectedNewsIndex == index, black: data.selectedNewsIndex != 0 }"
                 class="newsTab"
                 :style="index == 0 ? 'margin-left: 0' : ''">
                <span class="head-tab-item">{{ item.name }}</span>
              </a>
              <span v-if="index ==0 || index == 1" class="ornament-line"></span>
            </div>
          </div>
          <div v-if="data.newsList"
               style="font-size: 14px;color: #9598a2;font-weight: 400;height: 34px;line-height: 34px">
            <div v-for="item in data.newsList.slice(0,12)" :title="item.title" class="over-hidden theme-hover "
                 @click="goNewsInfo(item.id)">{{ item.title }}
            </div>
          </div>
        </div>
        <el-card class="normal-text" shadow="hover" style="margin-top:20px;padding: 14px 20px;cursor: pointer"
                 @click="goCourseCenter()">
          <div class="flex-between-center">
            <div class="flex-column">
              <span style="font-size: 16px;color: #171920">浏览更多</span>
              <span v-if="data.courseTypeList" style="margin-top: 5px">{{ data.selectedCourseItem.name }}</span>
            </div>
            <img style="width: 36px;height: 36px" src="@/assets/images/home/right-arrow.png" alt="">
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, reactive, watch} from 'vue';
import {useRouter} from 'vue-router';
import {getTreeDictByCode, listArticleByIntentExam, listArticleCatalog, listBanner} from '../../api/home.js'
import {listGoods} from '../../api/goods.js'
import CourseCardGroup from '../component/course-card-group.vue'

const router = useRouter();
const {proxy} = getCurrentInstance();
const emit = defineEmits(['goNewsInfo', 'goGoodsInfo', 'goCourseCenter']);
const props = defineProps({
  courseTypeList: {
    type: Array
  },
});
const data = reactive({
  courseTypeList: [],
  goodsList: [],
  newsLinkList: [{id: 1, name: '报考指南', url: ''}, {id: 1, name: '准考证打印', url: ''}, {
    id: 1,
    name: '报考指南',
    url: ''
  }, {id: 1, name: '报考指南', url: ''}, {id: 1, name: '报考指南', url: ''}, {id: 1, name: '微信群交流', url: ''}],
  newsTabList: [],
  newsList: [],
  examTrendList: [],
  imageUrl: '',
  imageLinkUrl: '',
  selectedCourseTypeIndex: 0,
  selectedCourseItem: {
    id: '',
    name: ''
  },
  selectedNewsIndex: 0,
  courseCenterBannerList: []
});

onMounted(() => {
  initData()
})
const initData = () => {
  initNewsTab()
}

function courseTypeTabChange(item, index) {
  if (data.selectedCourseTypeIndex != index) {
    data.selectedCourseTypeIndex = index
    data.selectedCourseItem = item
    data.selectedNewsIndex = 0
    getCourseCenterBanner(item.id)
    listCourse()
    listNews(data.newsTabList[0].id)
    initExamTrend()
  }
}

function getCourseCenterBanner(id) {
  data.courseCenterBannerList = []
  let requestData = {
    catalogCode: 'courseCenterCode',
    courseType: id,
    provinceId: '',
  }
  listBanner(requestData, (res) => {
    data.courseCenterBannerList = res.data
    data.imageUrl = data.courseCenterBannerList[0].imageUrl
    data.imageLinkUrl = data.courseCenterBannerList[0].linkUrl
  })
}

function listCourse() {
  data.goodsList = []
  listGoods({categoryId: data.selectedCourseItem.id}, (res) => {
    data.goodsList = res.data
    data.goodsList.map(item => {
      item.type = 'course'
    })
  })
}

function listNews(catalogId) {
  data.newsList = []
  let requestData = {
    catalogId: catalogId,
    courseType: data.selectedCourseItem.id,
    provinceId: '',
    // intentionalExamFlag: 1
  }
  listArticleByIntentExam(requestData, (res) => {
    data.newsList = res.data
  })
}

function initNewsTab() {
  data.newsTabList = []
  listArticleCatalog({}, (res) => {
    let resData = res.data
    if (resData) {
      resData.map(item => {
        if (item.name == '热点' || item.name == '即时' || item.name == '免费资料') {
          data.newsTabList.push(item)
        }
      })
      data.newsTabList.sort((a, b) => {
        return a.orderNum - b.orderNum
      })
      listNews(data.newsTabList[0].id)
    }
  })
}

function newsTabChange(item, index) {
  if (data.selectedNewsIndex != index) {
    data.selectedNewsIndex = index
    listNews(item.id)
  }
}

function goNewsInfo(id) {
  emit('goNewsInfo', id)
}

function goGoodsInfo(id) {
  emit('goGoodsInfo', id)
}

function goCourseCenter() {
  emit('goCourseCenter', data.selectedCourseItem.id)
}

function initExamTrend() {
  data.examTrendList = []
  getTreeDictByCode({typeCode: 'examTrendCode',courseType: data.selectedCourseItem.id}, (res) => {
    data.examTrendList = res.data
    // data.examTrendList.splice(5, 0, {name: '微信交流'})
    data.examTrendList.slice(0, 6)
  })
}

watch(() => {
  return props.courseTypeList
}, (val) => {
  data.courseTypeList = val
  data.selectedCourseItem = val[0]
  getCourseCenterBanner(val[0].id)
  listCourse()
  initExamTrend()
})

</script>

<style scoped>
.course-bottom {
  position: absolute;
  left: 50%;
  top: 28px;
  margin-left: -16px;
  width: 32px;
  height: 3px;
  border-top: 3px solid #04ADDB;
  display: block;
}

.headerTab {
  margin-left: 0;
  cursor: pointer;
  padding: 6px 15px;
}

.newsTab {
  margin-left: 0;
  cursor: pointer;
  padding: 6px 0;
}

.active,
.headerTab:hover,
.newsTab:hover,
.black:hover,
.black.active {
  color: #04ADDB;
}

.activeCourse {
  color: #04ADDB;
}

.active .head-tab-item, .newsTab:hover,
.headerTab:hover .head-tab-item {
  padding-bottom: 5px;
  border-bottom: solid 3px #04addb;
}

.normal-text {
  font-size: 12px;
  color: #9598a2;
  font-weight: 400;
}

:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}

.ornament-line {
  margin: 0 20px;
  border-left: 1px solid #EBEBEB;
  font-size: 16px
}

</style>
